<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形放大镜</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box {
        width: 1226px;
        margin: 100px auto;
    }

    .cl::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }

    .left {
        float: left;
        width: 400px;
        height: 500px;
        position: relative;
    }

    .top {
        width: 400px;
        height: 400px;
        position: relative;
    }

    .top>img {
        width: 100%;
        height: 100%;
    }

    .shadow {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        /* width: 200px;
        height: 200px; */
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .bigimg {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        /* width: 500px;
        height: 500px; */
        position: absolute;
        top: 0;
        left: 500px;
        overflow: hidden;
    }

    #bigimg {
        width: 800px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .imglist {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .imglist img {
        vertical-align: top;
    }

    .active {
        border: 1px solid red;
    }
</style>

<body>
    <div id="app">
        <div class="box cl">
            <div class="left" id="left">
                <div class="top" @mousemove="move" id="top" @mouseenter="enter" @mouseleave="leave">
                    <img :src="img" alt="" id="showimg">
                    <div class="shadow" id="shadow" :style="shadowStyle" v-show="flag"></div>

                    <div class="bigimg" id="big" v-show="flag" :style="bigDivstyle">
                        <img id="bigimg" :style="bigimgstyle" :src="bigimg" alt="">
                    </div>
                </div>
                <div class="imglist" v-if="goodsinfo">
                    <div class="item" v-for="item in goodsinfo" @mouseenter="over(item)"
                        :class="{active:item==img+'_90x90.jpg'}">
                        <img :src="item" alt="">
                    </div>
                    <!-- <div class="item" v-for="item in goodsinfo.goodslist.replace('/50x50/g','90x90').split('|')" @mouseenter="over(item)">
                        <img src="item" alt="">
                    </div> -->

                </div>
            </div>

        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            shadowStyle: "",
            bigimgstyle: "",
            bigDivstyle: "",
            flag: false,
            img: "https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg",
            bigimg: "https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_800x800.jpg",
            goodsinfo: [],
            buynum: 1,
        },
        async created() {
            let str = window.location.search;
            if (str.indexOf("id") != -1) {//表示有id
                let id = str.split("=")[1];
                //根据id获取数据
                let {data: list} = await axios({
                    method: "get",
                    url: "http://localhost:2345/goods",
                    params: {
                        id
                    }
                });

                if (list.length) {
                    this.goodsinfo = list[0].goodslist.replace(/50x50/g, '90x90').split('|');
                    this.img = list[0].goodsimg;
                    this.bigimg = list[0].goodsimg + "_800x800.jpg";
                }
                console.log(this.goodsinfo);

            } else {
                // location.href = "goodslist.html";
            }
        },
        mounted() {
            this.topDiv = document.getElementById("top");
            this.leftDiv = document.getElementById("left");
            this.shadowDiv = document.getElementById("shadow");
            this.bigimgDiv = document.getElementById("bigimg");
            this.bigDiv = document.getElementById("big");
            this.showimgDiv = document.getElementById("showimg");
            // console.log(this.leftDiv);
            this.letf = this.leftDiv.offsetLeft;
            this.top = this.leftDiv.offsetTop;
            this.shadowWidth = parseFloat(window.getComputedStyle(this.shadowDiv)["width"]);
            this.topWidth = this.topDiv.offsetWidth;
            this.showimgWidth = this.showimgDiv.offsetWidth;

            this.bigimgWidth = parseFloat(window.getComputedStyle(this.bigimgDiv)["width"]);
            this.bigWidth = parseFloat(window.getComputedStyle(this.bigDiv)["width"]);

        },
        methods: {
            over(src) {
                this.img = src.replace("90x90", "400x400");
                // this.bigimg = src.replace("90x90", "400x400");
                this.bigimg = src.replace("90x90", "800x800");
            },
            enter() {
                this.flag = true;
            },
            leave() {
                this.flag = false;
            },
            move() {
                let pageX = window.event.pageX;
                let pageY = window.event.pageY;

                let x = pageX - this.letf - this.shadowWidth / 2;
                let y = pageY - this.top - this.shadowWidth / 2;
                let max = this.topWidth - this.shadowWidth;

                if (x < 0) x = 0;
                if (x > max) x = max;
                if (y < 0) y = 0;
                if (y > max) y = max;

                let bigimgx = x * (this.bigimgWidth / this.showimgWidth);
                let bigimgy = y * (this.bigimgWidth / this.showimgWidth);//要成比例放大或缩小才行

                // let bigimgx = x * (this.bigWidth / this.shadowWidth);
                // let bigimgy = y * (this.bigWidth / this.shadowWidth);

                // let bigimgx = x * this.bigimgWidth / this.topWidth;
                // let bigimgy = y * this.bigimgWidth / this.topWidth;

                // let bigimgx = x * this.bigimgWidth / this.bigWidth; 
                // let bigimgy = y * this.bigimgWidth / this.bigWidth;
                // console.log(x,y);
                // console.log(bigimgx,bigimgy);

                let bigDivx = x - (this.bigWidth - this.shadowWidth) / 2
                let bigDivy = y - (this.bigWidth - this.shadowWidth) / 2

                this.shadowStyle = {
                    left: x + "px",
                    top: y + "px"
                }
                this.bigimgstyle = {
                    left: -bigimgx + "px",
                    top: -bigimgy + "px"
                }
                this.bigDivstyle = {
                    left: bigDivx + "px",
                    top: bigDivy + "px"
                }

            }

        },
    })
</script>

</html>